<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./color.js"></script>
	</head>
	<body style="margin: 0px;">
		<canvas id="myCanvas" width="100%" height="100%"></canvas>
		<script type="text/javascript">
			function Circle(x,y,radius,ix,iy){
				this.x = x;
				this.y = y;
				this.ix = ix;
				this.iy = iy;
				this.radius = radius;
				//this.color = randomcolor_6();
				this.gradual = [-5,5,-5];
				this.colornum = [];
				init_color(this);
			}
			Circle.prototype.draw = function(context){
				//context.save();
				context.beginPath();
				context.arc(this.x,this.y,this.radius,0,Math.PI*2,false);
				//context.fillStyle="#9B7344";//设置填充颜色
				context.fillStyle=this.color;//设置填充颜色
				context.fill();//开始填充
				context.strokeStyle=this.color;//将线条颜色设置为蓝色
				//context.stroke();
				//context.restore();
			}
			
			
			function flipoff(c){
				//是否滑出边缘
				if(c.x <=0 || c.x >= window.document.body.offsetWidth){
					c.ix = 0 - c.ix;
				}
				if(c.y <=0 || c.y >= window.screen.availHeight){
					c.iy = 0 - c.iy;
				}
			}
			
			function drawAnimation() {
			    window.requestAnimationFrame(drawAnimation);
				
			    context.clearRect(0, 0, canvas.width, canvas.height);
				for(var i=0;i<index;i++){
					for(var j=i+1;j<index;j++){
						Intersect(circleList[i],circleList[j]);
					}
					flipoff(circleList[i]);
				}
				context.save();
				for(var i=0;i<index;i++){
					circleList[i].x += circleList[i].ix;
					circleList[i].y += circleList[i].iy;
					circleList[i].draw(context);
				}
				context.stroke();
				context.restore();
				if(index < total){
					duration++;
					//console.log(duration);
					if(duration > 10){
						var circle = new Circle(100 * index,500,50,1,-1);
						circleList[index++] = circle;
						duration = 0;
					}
				}
				else{
					duration++;
					if(duration > 10){
						for(var i=0;i<index;i++){
							gradual_color2(circleList[i]);
							//circleList[i].color = randomcolor_6();
						}
						
						duration = 0;
					}
				}
				
			}
			window.onload = function () {
			    canvas = document.getElementById('myCanvas');
				canvas.height = window.screen.availHeight;
				canvas.width = window.document.body.offsetWidth;
			    context = canvas.getContext('2d');
				circleList = new Array();
				index = 0;
				//var circle = new Circle(200,100,50,1,1);
				//circleList[index++] = circle;
				duration = 0;
				total = 20;
			    drawAnimation();
			}
			//碰撞的前提是双方的速度是相等的，碰撞后的速度也相等
			function Intersect(c1,c2) {
				var dx = c1.x-c2.x;
				var dy = c1.y-c2.y;
				var distance = Math.sqrt(dx*dx+dy*dy);
				//是否相碰撞
				if(distance < (c1.radius + c2.radius)){
					//计算碰触点
					var intersect_x = (c1.x + c2.x)/2;
					var intersect_y = (c1.y + c2.y)/2;
					//根据当前中心点和碰触点计算距离，这个距离只能当做比例使用
					var c1_power_x =  c1.x - intersect_x;
					var c1_power_y =  c1.y - intersect_y;
					//碰撞时的能量交换，会认为对方将自身所有能量交换过来
					//但是当对方能量为0的时候，自身能量损失很小，反而对方获取了同样大小的能量，这不符合能量守恒，所以有后面的能量衰减
					var base1 = Math.sqrt((Math.pow(c2.ix,2)+Math.pow(c2.iy,2))/(Math.pow(c1_power_x,2)+Math.pow(c1_power_y,2)));
					c1.ix += c1_power_x * base1;
					c1.iy += c1_power_y * base1;
					
					var c2_power_x = c2.x - intersect_x;
					var c2_power_y = c2.y - intersect_y;
					var base2 = Math.sqrt((Math.pow(c1.ix,2)+Math.pow(c1.iy,2))/(Math.pow(c2_power_x,2)+Math.pow(c2_power_y,2)));
					c2.ix += c2_power_x * base2;
					c2.iy += c2_power_y * base2;
				}
				//未知能量衰减
				if(c1.ix >  5)c1.ix--;
				if(c2.ix >  5)c2.ix--;
				if(c1.ix < -5)c1.ix++;
				if(c2.ix < -5)c2.ix++;
							 
				if(c1.iy >  5)c1.iy--;
				if(c2.iy >  5)c2.iy--;
				if(c1.iy < -5)c1.iy++;
				if(c2.iy < -5)c2.iy++;
			
			}
		</script>
	</body>
</html>
